<template>
	<b-submit-page bottomExtraClass="bg-color-1 bottom-shadow" bottomPdClass="p-2-2">
		<ProductDetailMain :detail="detail" />
		<template #bottom>
			<view class="row-center">
				<view class="flex-1 text-center">
					<view class="inline-block px-1-3" @click="toShoppingCar">
						<text class="iconfont icon-shopcar color-main"></text>
					</view>
				</view>
				<view
					class="py-1-3 px-4 rounded-l inline-block border b-active mr-2"
					@click="showPopup(true)"
					hover-class="opacity-80"
					hover-start-time="0"
					hover-stay-time="50"
				>
					<text class="text-n font-semibold color-main">加入购物车</text>
				</view>
				<view
					class="py-1-3 px-5 rounded-l inline-block bg-primary"
					@click="showPopup(false)"
					hover-class="opacity-80"
					hover-start-time="0"
					hover-stay-time="50"
				>
					<text class="text-n font-semibold" style="color: #fdf6e5">立即购买</text>
				</view>
			</view>
			<!-- <view class="mx-3-1 flex flex-row items-stretch bg-primary bottom-shadow rounded-xxxl">
				<view class="flex-1 row-center">
					<view style="padding: 32rpx 0 48rpx 32rpx" class="flex-1">
						<text style="color: #fdf6e5;" class="text-m">查看推荐配套产品</text>
					</view>
					<view class="rounded-full bg-white flex-center" style="width: 48rpx;height: 48rpx;margin-left: 48rpx;margin-right: 16rpx">
						<text class="iconfont icon-tianjia color-active text-l"></text>
					</view>
				</view>
				<view class="w-min bg-b-color-1"></view>
				<view class="flex-1 row-center">
					<view style="padding: 32rpx 0 48rpx 32rpx" class="flex-1">
						<text style="color: #fdf6e5;" class="text-m">分享给好友一起嗨</text>
					</view>
					<view class="rounded-full bg-white flex-center" style="width: 48rpx;height: 48rpx;margin-left: 48rpx;margin-right: 16rpx">
						<text class="iconfont icon-tianjia color-active text-l"></text>
					</view>
				</view>
			</view> -->
		</template>
		<c-bottom-popup ref="bottomPopup">
			<view class="p-3-1">
				<view class="row-center pb-3-1 border-b b-color-1 mb-3-1">
					<view>
						<c-img :src="detail.thumbnail" :width="150" :height="150" />
					</view>
					<view class="flex-1">
						<view class="mb-2-2">
							<text class="color-error font-semibold">
								<text class="text-n">¥</text>
								<text class="text-xl">{{ detail.price || '--' }}</text>
							</text>
						</view>
						<view>
							<text class="color-main text-m font-semibold">{{ detail.name || '--' }}</text>
						</view>
					</view>
				</view>
				<view>
					<view class="mb-2-2">
						<text class="color-main text-n">数量</text>
					</view>
					<view class="row-center mb-3-1">
						<view
							class="border rounded-l b-active p-0-4"
							:hover-class="quantity <= 1 ? '' : 'opacity-50'"
							hover-start-time="0"
							hover-stay-time="0"
							:class="[quantity <= 1 ? 'opacity-30' : '']"
							@click="oper(-1)"
						>
							<text class="iconfont icon-jian text-m color-main"></text>
						</view>
						<view class="mx-3-1">
							<text class="color-main text-m">{{ quantity }}</text>
						</view>
						<view
							class="border rounded-l b-active p-0-4"
							:hover-class="quantity >= maxQuantity ? '' : 'opacity-50'"
							hover-start-time="0"
							hover-stay-time="0"
							:class="[quantity >= maxQuantity ? 'opacity-30' : '']"
							@click="oper(1)"
						>
							<text class="iconfont icon-tianjia text-m color-main"></text>
						</view>
					</view>
					<view
						class="py-2-2 text-center rounded-l bg-primary"
						@click="handlePopup"
						hover-class="opacity-80"
						hover-start-time="0"
						hover-stay-time="50"
					>
						<text class="text-n font-semibold" style="color: #fdf6e5">
							{{ isToShoopingCar ? '加入购物车' : '立即购买' }}
						</text>
					</view>
				</view>
			</view>
		</c-bottom-popup>
	</b-submit-page>
</template>

<script>
import { getGoodDetail } from '@/base/api/goods.js';
import { handleToShoppingCar } from '@/base/common-business.js';
import ProductDetailMain from './product-detail-main.vue';
import { ref } from 'vue';

export default {
	components: {
		ProductDetailMain,
	},
	onLoad(options) {
		this.reload(options.id);
	},
	setup() {
		const detail = ref({});
		async function reload(id) {
			const data = await getGoodDetail(id);
			if (data) {
				detail.value = data;
			}
		}

		const bottomPopup = ref();
		const isToShoopingCar = ref(false);
		const quantity = ref(1);
		const maxQuantity = ref(999);
		function showPopup(isShoppingCar) {
			isToShoopingCar.value = isShoppingCar;
			bottomPopup.value.open();
		}
		function oper(d) {
			if ((d < 0 && quantity.value <= 1) || (d > 0 && quantity.value >= maxQuantity.value)) {
				return;
			}
			quantity.value += d;
		}
		async function handlePopup() {
			if (isToShoopingCar.value) {
				const re = await handleToShoppingCar(detail.value);
				if (re) {
					bottomPopup.value.close();
				}
			} else {
			}
		}
		function toShoppingCar() {
			uni.switchTab({
				url: '/pages/home/shopping-bag/shopping-bag',
			});
		}
		
		return {
			reload,
			detail,
			showPopup,
			bottomPopup,
			isToShoopingCar,
			quantity,
			maxQuantity,
			oper,
			toShoppingCar,
			handlePopup,
		};
	},
};
</script>
